import { observer } from '@formily/reactive-vue'
import { connect, mapProps, mapReadPretty, h } from '@formily/vue'
import { ref, defineComponent } from 'vue'
import { DatetimePicker as VanDatetimePicker } from 'vant'
import { Popup as VanPopup } from 'vant'
import FormItem from '../form-item'
import { PreviewText } from '../preview-text'

const BaseDatetimePicker = observer(
  defineComponent({
    name: 'FBaseDatetimePicker',
    setup(props, { attrs, emit, slots }) {
      const {
        formItemProps = {},
        popupProps = {},
        datetimePickerProps = {},
        fieldListeners = {},
        popupListeners = {},
        datetimePickerListeners = {},
        format
      } = attrs
      const formatDate = (date, format) => {
        const map = {
          'yyyy': date.getFullYear(),
          'MM': ('0' + (date.getMonth() + 1)).slice(-2),  // 月份是从0开始的
          'dd': ('0' + date.getDate()).slice(-2),
          'HH': ('0' + date.getHours()).slice(-2),
          'mm': ('0' + date.getMinutes()).slice(-2),
          'ss': ('0' + date.getSeconds()).slice(-2),
        };
      
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, matched => map[matched]);
      }
      const show = ref(false)

      return () => {
        return h(
          'div',
          {},
          {
            default: () => [
              h(
                FormItem,
                {
                  attrs: {
                    value: attrs.value,
                    readonly: true,
                    clickable: true,
                    ...formItemProps,
                  },
                  on: {
                    click: () => {
                      show.value = true
                    },
                    ...fieldListeners,
                  },
                },
                slots
              ),
              h(
                VanPopup,
                {
                  attrs: {
                    value: show.value,
                    round: true,
                    position: 'bottom',
                    ...popupProps,
                  },
                  on: {
                    input: (val) => {
                      show.value = val
                    },
                    ...popupListeners,
                  },
                },
                {
                  default: () => [
                    h(
                      VanDatetimePicker,
                      {
                        attrs: {
                          showToolbar: true,
                          value: new Date(),
                          ...datetimePickerProps,
                        },
                        on: {
                          cancel: () => {
                            show.value = false
                          },
                          confirm: (val) => {
                            emit('change', format ? formatDate(val, format) : val)
                            show.value = false
                          },
                          ...datetimePickerListeners,
                        },
                      },
                      {}
                    ),
                  ],
                }
              ),
            ],
          }
        )
      }
    },
  })
)

export const DatetimePicker = connect(
  BaseDatetimePicker,
  mapProps({ readOnly: 'readonly' }),
  mapReadPretty(PreviewText.DatetimePicker)
)

export default DatetimePicker
